<template>
	<view class="content">
		<!-- 头部欢迎 :src="imgUrl+'   :src="imgUrl+'-->
		
		<view class="header_tit padd40">
			<image :src="imgUrl+'/static/wap/img/home_top@2x.png'" class="head_img"></image>
			<text class="head_txt">欢迎来到能源运维</text>
		</view>
		<!-- 轮播图 -->
		<view class="uni-padding-wrap padd40">
			<view class="page-section swiper height100">
				<view class="page-section-spacing height100">
					<!--   indicator-active-color="#D7D7D7"
					 :circular="circular" :interval="interval" :duration="duration" -->
					<swiper class="swiper height100" 
					:current="swiperCurrent"
					:autoplay="autoplay"
					:circular="circular"
					:interval="3000" :duration="duration"
					 @change="changeSwiper">
						<swiper-item class="height100" v-for="(item,index) in swiperImg" :key="index">
							<image :src="item.file" class="height100"></image>
						</swiper-item>
					</swiper>
	<!-- 				<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
						<swiper-item>
							<swiper-item class="height100" v-for="(item,index) in swiperImg" :key="index">
								<image :src="item.file" class="height100"></image>
							</swiper-item>
						</swiper-item>
					</swiper> -->
					<!-- 轮播指示点样式修改 -->
					<view class="dots">
						<block v-for="(item,index) in swiperImg" :key="index">
							<view class="dot" :class="index==swiperCurrent ? ' active' : ''"></view>
						</block>

					</view>
				</view>
			</view>
		</view>
		<!-- 九宫格区域 -->
		<view class="nav_list">
<!-- 			<navigator class="nav_item" v-for="item in navList" :key="item.text" :url="item.path">
				<image class="nav_item_img" :src="item.url" mode=""></image>
				<text class="nav_item_text">{{item.text}}</text>
			</navigator> -->  
			<view class="nav_item" v-for="item in navList" :key="item.name" :url="item.link" @click="navigator(item.link)">
				<image class="nav_item_img" :src="item.image" mode=""></image>
				<text class="nav_item_text">{{item.name}}</text>
			</view> 
		</view>
		<!-- 公告区域 -->
		<!-- <view class="dome1" :style="'transform:translateX('+marqueeDistance+'px)'">sec测试测试</view> --> 
		<view class="cement " v-if="false">
			<view class="cement_fl">
				首页
			</view>
			
			 <!-- #ifdef H5 -->
		   <marquee behavior="" scrollamount="6">
				<view class="marquee">
				     <text class="dome1"  v-for="(item,index) in indexInfo.noticelist" >{{item.notice_content}}</text>
				</view> 
			</marquee>
			
			<!-- <gbro :broadcastData='broadcastData' :broadcastStyle='broadcastStyle' style="width: 600rpx" ></gbro> -->
			    <!-- #endif --> 
				<!-- #ifdef MP-WEIXIN -->
				<view class="marquee2" id="div1">
				    <view class="dome1" :style="'transform:translateX(-'+marqueeDistance+'px)'">{{noticeTxt}}</view> 
				</view>
				<!-- #endif -->
			<!-- <gbro :broadcastData='broadcastData' :broadcastStyle='broadcastStyle' style="width: 600rpx" ></gbro>	 -->
			<!-- <text class="cement_tet" >
				<swiper class="_swiper tc" indicator-dots="false" autoplay="true" :interval="interval" circular="true" :duration="duration">
							
							<swiper-item v-for="(item,index) in indexInfo.noticelist" :key="index">
								<view class="swiper-item uni-bg-red" > 我日数据真多打骂了个和你你妈的哈哈哈哈沙雕吧你哦你妹妹的</view> 
							</swiper-item>
						</swiper>
			</text> -->
			
			<image class="cement_img" :src="imgUrl+'/static/wap/img/home_arrow@2x.png'"></image>
		</view>
		<!-- 余额展示 -->
		<view class="balance padd40">
			<text class="balance_tit">余额展示</text>
			<view class="balance_list">
				<view class="balance_item">
					<text>电费余额</text>
					<text>{{indexInfo.ele_time}}</text>
					<text>{{indexInfo.electric_fee||0}}元</text>
					<!-- <text>.22</text> -->
					<image :src="imgUrl+'/static/wap/img/home_dain@2x.png'"></image>
				</view>
				<view class="balance_item">
					<text>水费余额</text>
					<text>{{indexInfo.water_time}}</text>
					<text>{{indexInfo.water_fee||0}}元</text>
					<!-- <text>.22元</text> -->
					<image :src="imgUrl+'/static/wap/img/home_shui@2x.png'"></image>
				</view>
				<view class="balance_item" style="margin-right: 0">
					<text>物业费余额</text>
					<text>{{indexInfo.pro_time}}</text>
					<text>{{indexInfo.property_fee||0}}元</text>
					<!-- 	<text>.22元</text> -->
					<image :src="imgUrl+'/static/wap/img/home_wu@2x.png'"></image>
				</view>
			</view>
		</view>
		<!-- 知识特区 -->
		<view class="Knowledge padd40">
			<view class="Knowledge_box">
				<text class="Knowledge_tit">知识特区</text>
				<view class="morearticle" @click="article">更多>></view>
			</view>
			<swiper style="height: 250rpx" 
			>
						<swiper-item v-for="(item,index) in pointImg" :key="index">
							<image class="Knowledge_img" :src="item.file"></image>
						</swiper-item>
					</swiper>
		</view>
		<!-- 列表 -->
		<!-- 查看更多 -->
		<view class="Know_lsit">
			<view class="Know_item" v-for="(item,index) in indexInfo.articlelist" @click="godetail(item)">
				<image class="Know_item_img" :src="item.image"></image>
				<view class="Know_item_info">
					<text>{{item.title}}</text>
					<view class="Know_info_fb">
						<text style="font-size:22rpx;">平台发布</text>
						<text style="font-size:22rpx;">{{item.create_at}}</text>
					</view>
				</view>
			</view>

		</view>
	</view>

</template>

<script>
	//import gbro from "../../components/gbro-marquee/marquee.vue"
	import util from '../../static/util.js'
	import tabbar from '../../components/tabbar/tabbar.vue'
	export default {
		components: {
			//gbro
			tabbar
		},
		data() {
			return {
				imgUrl:util.globalData.imgPre,
				autoplay: true,
				circular: true,
				interval: 3000,
				duration: 500,
				// 轮播图
				swiperImg: '',
				// 导航九宫格区域
				navList: [
					// {
					// 		url: 'https://nengyuan.chuangxiangdianli.com/static/wap/img/sao@2x.png',
					// 		text: '扫一扫',
					// 		path: '../scanPage/scanPage'
					// 	},
					// 	{
					// 		url: 'https://nengyuan.chuangxiangdianli.com/static/wap/img/shui@2x.png',
					// 		text: '水费',
					// 		path: '../costPage/waterPage'
					// 	},
					// 	{
					// 		url: 'https://nengyuan.chuangxiangdianli.com/static/wap/img/dian@2x.png',
					// 		text: '电费',
					// 		path: '../costPage/electricityPage'
					// 	},
					// 	{
					// 		url: 'https://nengyuan.chuangxiangdianli.com/static/wap/img/wu@2x.png',
					// 		text: '物业费',
					// 		path: '../costPage/propertyPage'
					// 	},
					// 	{
					// 		url: 'https://nengyuan.chuangxiangdianli.com/static/wap/img/jiao@2x.png',
					// 		text: '缴费',
					// 		path: '../payPage/payPage'
					// 	},
					// 	{
					// 		url: 'https://nengyuan.chuangxiangdianli.com/static/wap/img/neng@2x.png',
					// 		text: '能耗分析',
					// 		path: '../energyAna/energyAna'
					// 	},
					// 	{
					// 		url: 'https://nengyuan.chuangxiangdianli.com/static/wap/img/bao@2x.png',
					// 		text: '报修',
					// 		path: '../repairPage/repairPage'
					// 	},
					// 	{
					// 		url: 'https://nengyuan.chuangxiangdianli.com/static/wap/img/jie@2x.png',
					// 		text: '解绑',
					// 		path: '../untiePage/untiePage'
					// 	}
				],
				// 轮播图当前下标
				current: 0,
				swiperCurrent: 0,
				page: 1,
				indexInfo: '',
				noticeTxt: '',
				marqueePace: 0.5, //滚动速度
				marqueeDistance: 0, //初始滚动距离
				marquee_margin: 0,
				size:14,
				interval:20, // 时间间隔
				length:'',
				windowWidth:'',
				broadcastData :['秒秒天天答复是短发分公司噶阿飞嘎斯在分分答复是短发分公司噶阿飞嘎斯在时时答复是短发分公司噶阿飞嘎斯在天天答复是短发分公司噶阿飞嘎斯在',
				                        '月月答复是短发分公司噶阿飞嘎斯在', '年年答复是短发分公司噶阿飞嘎斯在'
				               ],
	          broadcastStyle: {
					   speed: 2, //每秒3个字
					   font_size: "32", //字体大小(rpx)
					   text_color: "#869bad", //字体颜色
					   back_color: "#F7F9FB", //背景色
			},
			pointImg:[]
			}
		},
		onLoad(){ 

			// 测试
			 uni.setStorage({
					key:'token',
					data:'32f06533478953991c0eefb70878decf'
				})

		    this.getIndexInfo()
			//this.getArticleList()
			/* this.$wechat.ready(function(){
				console.log("验证通过")
			}); */
			//this.$wechat.isWechat()
			this.getBannerList()
			this.getBannerList2()
		},
		onShow() {
			this.getIndexInfo()
			//this.getArticleList()
			/* this.$wechat.ready(function(){
				console.log("验证通过")
			}); */
			//this.$wechat.isWechat()
			this.getBannerList()
			this.getBannerList2()
		},
		methods: { 
			slideChange(e) {
				//this.$emit('getCurrentIndex',e.detail.current); 
			},
			navigator(url){  
				const token = uni.getStorageSync('token'); 
				if(token){
				  uni.navigateTo({
				  	url:url
				  })
				}else{
				  uni.navigateTo({
					url:'../login/loginWx'
				  })
				}
				
			},
			article(){
			   uni.navigateTo({
			   	url:'../article/article'
			   })
			},
			godetail(item) {
				uni.navigateTo({
					url: '../article/articleDetail?id=' + item.id
				})
			},
			changeSwiper(e) {
				this.swiperCurrent = e.detail.current;
			},
			getBannerList() { //banner 
				var that = this;
				that.ajax({
					url: '/api/index/getBannerList',
					data: {
						cate_id: 1
					},
					success: function(res) {
						that.swiperImg = res.data;

					}
				})
			},
			getBannerList2(){//banner
				var that=this;
				that.ajax({
					url:'/api/index/getBannerList',
					data:{cate_id:2},
					success:function(res){
						that.pointImg=res.data;
						
					}
				  })
			},
			getArticleList(){
				var that=this;
				that.ajax({
					url: '/api/article/getArticleList',
					data: {
						page: that.page,
						limit: 10
					},
					success: function(res) {
						//that.swiperImg=res.data;
					}
				})
			},
			getIndexInfo() {
				var that = this;
				//#ifdef H5
				   console.log("H5")
				   //公众号
				   that.ajax({
				   	url:'api/index/getIndexInfo',
				   	data:{type:2},
					method:'POST',
				   	success:function(res){
				   		that.indexInfo=res.data;
						that.navList=res.data.navlist 
				   	}
				   })
				//#endif
				//#ifdef MP-WEIXIN
				   console.log("微信小程序")
				   //小程序
				   that.ajax({
				   	url:'api/index/getIndexInfo',
				   	data:{type:1},
					method:'POST',
				   	success:function(res){
				   		that.indexInfo=res.data;
						var txt='';
						for(var i=0;i<that.indexInfo.noticelist.length;i++){
							txt+=that.indexInfo.noticelist[i].notice_content;
						} 
						that.navList=res.data.navlist
						that.noticeTxt = txt;
						that.length = that.noticeTxt.length * that.size; //文字长度
						//var o = document.getElementById("div1");
						// var windowWidth = o.clientWidth||o.offsetWidth;
						// var windowWidth = wx.getSystemInfoSync().windowWidth;// 屏幕宽度
						var query = wx.createSelectorQuery();
						query.select('#div1').boundingClientRect()
						query.exec(function(res) { 
							//res就是 该元素的信息 数组
							// console.log(res[0].width);
							that.windowWidth = res[0].width;
							that.scrolltxt();
						})
						// console.log(length,that.windowWidth);
						/* that.setData({
						  length: length,
						  windowWidth: windowWidth,
						 
						
						 }); */
						//that.scrolltxt();// 第一个字消失后立即从右边出现
					}
				})
				//#endif

			},
			scrolltxt: function () {
			      var that = this;
			      var length = that.length;//滚动文字的宽度
			      var windowWidth = that.windowWidth;//屏幕宽度
			      if (length > windowWidth){
					 
			             var interval = setInterval(function () {
							//  console.log("走")
			              var maxscrollwidth = length + that.marquee_margin;//滚动的最大宽度，文字宽度+间距，如果需要一行文字滚完后再显示第二行可以修改marquee_margin值等于windowWidth即可
			              var crentleft = that.marqueeDistance;
						 // console.log(maxscrollwidth)
			              if (crentleft < maxscrollwidth-1) {//判断是否滚动到最大宽度
			                  /* that.setData({
			                    marqueeDistance: crentleft + that.data.marqueePace
			                   }) */
							   that.marqueeDistance=crentleft + that.marqueePace
			              }else {
			                   console.log("替换");
			                  /* that.setData({
			                    marqueeDistance: 0 // 直接重新滚动
			                   }); */
							   that.marqueeDistance=0;
			                   clearInterval(interval);
			                   that.scrolltxt();
			              }
			             }, that.interval);
			      }else{
			           // that.setData({ marquee_margin:"1000"});//只显示一条不滚动右边间距加大，防止重复显示
					   
					   that.marquee_margin=0
			      } 
			},
		},
		onReachBottom() {
			console.log("到底了！！")
		},
	}
</script>

<style lang="less" scoped>
	.dome1 {
		padding-bottom: 15rpx;
		height: 44rpx;
		line-height: 44rpx;
		font-size: 24rpx;
		color: #869bad;
	}

	.marquee {

		white-space: nowrap;
		display: flex;

	}

	.marquee2 {
		width: 600rpx;
		white-space: nowrap;
		overflow: hidden;

	}

	.dome1 {
		white-space: nowrap;
		word-wrap: break-word;
		word-break: normal;
	}

	.content {
		color: #333;
	}

	.morearticle {
		font-size: 26rpx;
		padding: 30rpx;
		text-align: right;
	}

	// 头部欢迎
	.header_tit {

		.head_img {
			margin-right: 28rpx;
			width: 28rpx;
			height: 28rpx;
			vertical-align: middle;
		}

		.head_txt {
			font-size: 28rpx;
		}
	}

	// 轮播图
	.uni-padding-wrap {
		position: relative;
		margin-top: 60rpx;
		margin-bottom: 70rpx;
		height: 270rpx;
	}

	// 九宫格
	.nav_list {
		display: flex;
		flex-wrap: wrap;
		// height: 360rpx;

		.nav_item {
			margin-bottom: 40rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			text-align: center;
			width: 25%;
			font-size: 30rpx;

			.nav_item_img {
				margin: 0 auto;
				margin-bottom: 10rpx;
				width: 100rpx;
				height: 100rpx;
			}
			.nav_item_text{
				font-size: 28rpx;
			}
		}
	}

	// 公告区域
	.cement {
		display: flex;
		justify-content: space-between;
		margin: 0 30rpx;
		padding: 24rpx 35rpx 0 35rpx;
		height: 68rpx;
		background: #f7f9fb;
		border-radius: 10rpx;

		.cement_fl {
			margin-right: 20rpx;
			float: left;
			width: 65rpx;
			height: 42rpx;
			line-height: 42rpx;
			text-align: center;
			color: #fff;
			font-size: 22rpx;
			background-color: #41b4b6;
			border-radius: 8rpx;
		}

		.cement_tet {
			flex: 1;
			height: 44rpx;
			line-height: 44rpx;
			font-size: 24rpx;
			color: #869bad;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.cement_img {
			margin: 14rpx 0 0 50rpx;
			width: 21rpx;
			height: 21rpx;
			vertical-align: super
		}
	}

	// 余额展示
	.balance {
		margin-top: 42rpx;

		.balance_tit {
			font-weight: bold;
			font-size: 30rpx;
		}

		.balance_list {
			overflow: hidden;
			margin-top: 35rpx;

			.balance_item {
				float: left;
				padding: 20rpx 0;
				width: 33%;
				// height: 188rpx;
				text-align: center;
				border-radius: 10rpx;
				box-shadow: 0rpx 0rpx 38rpx 0rpx rgba(168, 174, 181, 0.11);

				& text:nth-child(1) {
					margin-bottom: 20rpx;
					display: block;
					font-size: 24rpx;
					color: #666;
					font-weight: bold;
				}
				& text:nth-child(2) {
					
					display: block;
					font-size: 24rpx;

				}
				& text:nth-child(2) {
					font-size: 24rpx;
					font-weight: bold;
				}

				& text:nth-child(3) {
					font-size: 24rpx;
					font-weight: bold;
				}
				
				image {
					display: block;
					margin: 0 auto;
					width: 110rpx;
					height: 110rpx;
				}
			}
		}
	}

	// 知识特区
	.Knowledge {
		margin-top: 42rpx;

		.Knowledge_tit {
			display: block;
			font-weight: bold;
			font-size: 30rpx;
		}

		.Knowledge_img {
			width: 100%;
			height: 250rpx;
		}
	}

	// 列表区
	.Know_lsit {
		margin: 0 40rpx;

		.Know_item {
			display: flex;
			padding: 44rpx 0 42rpx;
			border-bottom: 1rpx solid #dcdcdc;

			.Know_item_img {
				margin-right: 24rpx;
				width: 194rpx;
				height: 194rpx;
				display: block;
				border-radius: 20rpx;
			}

			.Know_item_info {
				width: 408rpx;
				font-size: 30rpx;
				font-weight: bold;

				text {
					margin: 30rpx 0;
					display: block;
					font-size: 28rpx;
				}

				.Know_info_fb {
					display: flex;
					justify-content: space-between;
					font-size: 10rpx;
					color: #999;

					text {
						margin: 0;
					}
				}
			}
		}

		// 选择最后的 .Know_item元素 取消边框
		& .Know_item:last-child {
			border: none;
		}
	}

	// 轮播图指示点
	.dots {
		position: absolute;
		bottom: -30rpx;
		left: 50%;
		// 这里一定要注意兼容不然很可能踩坑          
		transform: translate(-50%, 0);
		-webkit-transform: translate(-50%, 0);
		z-index: 99;
		display: flex;
		flex-direction: row;
		justify-content: center;

		.dot {
			margin: 0 10rpx;
			width: 16rpx;
			height: 16rpx;
			transition: all .6s;
			background: #D7D7D7;
			border-radius: 50%;
		}

		.active {
			width: 32rpx;
			height: 16rpx;
			background: #D7D7D7;
			border-radius: 10rpx;
		}
	}
	.Knowledge_box{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 31rpx;
	}
</style>
